<template>
  <div class="singlePage">
    <!-- <div class="tree" v-if="roleId === 1">
      <div class="tree-top">
        <div class="tree-top-left">数字字典</div>
        <div class="tree-top-right" v-if="roleId === 1" @click="newAdd">
          +新增
        </div>
      </div>
      <div class="tree-bottom">
        <el-tree :data="groupList" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="[1]"
          node-key="id"></el-tree>
      </div>
    </div> -->
    <el-form :inline="true" size="small">
      <el-form-item label="对讲平台：">
        <el-select v-model="formData.intercomPlatform" placeholder="请选择对讲平台" clearable filterable>
          <el-option v-for="item in platformList" :key="item.id" :label="item.groupName" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search('search')">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" icon="el-icon-plus" v-if="roleId === 1" @click="newAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" :height="'calc(100% - 0px)'" :data="tableData" v-loading="loading"
      tooltip-effect="dark">
      <el-table-column label="序号" type="index" width="50" align="center">
        <template slot-scope="scope">
          <span>{{
            (queryInfo.pagenum - 1) * queryInfo.pagesize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="dictionariesName" v-if="roleId !== 1">
      </el-table-column>
      <el-table-column prop="groupName" label="群组名称" v-if="roleId === 1">
      </el-table-column>
      <el-table-column prop="code" label="定向访问标识" v-if="roleId === 1">
      </el-table-column>
      <el-table-column prop="dirName" label="编码（年）" v-if="roleId !== 1">
      </el-table-column>
      <el-table-column prop="dirCode" label="金额（元）" v-if="roleId !== 1">
      </el-table-column>
      <el-table-column label="流量值" v-if="roleId !== 1">
        <template slot-scope="scope">
          {{ scope.row.flowValue }}&#8197;{{
            scope.row.flowValueUnit == 1 ? "MB" : "GB"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="isShow" label="是否展示" v-if="roleId === 1">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isShow" :active-value="0" :inactive-value="1" @change="isShowChange(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="redact(scope.row, '编辑')">编辑</el-button>
          <el-popconfirm title="确认删除？" @confirm="handleConfirm(scope.row.id)" @cancel="handleCancel">
            <el-button type="text" :class="roleId === 1 ? 'delColor' : ''" :disabled="roleId !== 1" size="small"
              slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- </div> -->
    <pagination v-if="roleId === 1" :page="queryInfo.pagenum" :pageSize="queryInfo.pagesize" :total="total"
      @pageChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
    </pagination>
    <Dictionaries ref="dictionaries" @query="search()" @query_1="clear()" @query_roleIdNot="getDigitalDictionaryInfo()">
    </Dictionaries>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
import Dictionaries from "@/views/systemManage/components/dictionaries";
export default {
  data() {
    return {
      formData: {
        intercomPlatform: "",
      },
      platformList: [],
      loading: false,
      tableData: [],
      multipleSelection: [],
      queryInfo: {
        // 当前的页码数
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 10,
      },
      // 总数
      total: 10,
      title: "",
      defaultProps: {
        children: "child",
        // label: "groupName",
        label: (data, node) => {
          // console.log(data, node)
          return data.code == null ? '' + data.groupName : data.code + ' —— ' + data.groupName
        }
      },
      id: 29,
      groupList: [],
      checkObj: "",
    };
  },
  components: {
    pagination,
    Dictionaries,
  },
  computed: {
    roleId() {
      return JSON.parse(localStorage.getItem("userInfo")).roleId;
    },
    hasSelected() {
      return this.multipleSelection.length > 0;
    },
  },
  created() {
    this.getDigitalDictionaryInfo();
    this.getDicTrees();
    this.getGroupList()
    this.search()
  },
  methods: {
    async getDicTrees() {
      const params = {
        id: this.id,
      };
      const res = await this.$api.getDicTrees(params);
      if (res.code === 200) {
        this.groupList = res.data;
      }
    },
    async search(type) {
      if (this.roleId == 1) {
        this.loading = true
        if (type == 'search') {
          this.queryInfo.pagenum = 1
        }
        const params = {
          groupName: this.formData.intercomPlatform,
          page: this.queryInfo.pagenum,
          pageSize: this.queryInfo.pagesize
        }
        params.page--
        const res = await this.$api.getGroupListByPage(params)
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.recordsTotal
          this.loading = false
        }
      }
    },
    handleCurrentChange(newPage) {
      //  将监听接受到的页码值的数据 newPage 赋值给 pagenum
      this.queryInfo.pagenum = newPage;
      this.search();
      //  修改完以后，重新发起请求获取一次数据
    },
    handleSizeChange(limit) {
      this.queryInfo.pagesize = limit;
      this.search();
    },
    async getDigitalDictionaryInfo() {
      if (this.roleId !== 1) {
        this.loading = true;
        const params = {
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          roleId: JSON.parse(localStorage.getItem("userInfo")).roleId,
        };
        const res = await this.$api.getDigitalDictionaryInfo(params);
        if (res.code === 200) {
          this.tableData = res.data;
          this.loading = false;
        }
      }
    },
    async getGroupList() {
      const res = await this.$api.getGroupList();
      if (res.code === 200) {
        this.platformList = res.data;
      }
    },
    redact(val, status) {
      this.$refs.dictionaries.init(val, status);
    },
    newAdd() {
      // if (this.checkObj) {
      //   this.$refs.dictionaries.init(this.checkObj);
      // } else {
      //   this.$message.warning("请选择组织架构树！");
      // }
      this.$refs.dictionaries.init(this.checkObj);
    },
    handleCancel() {
      this.$message("已取消");
    },
    async handleConfirm(id) {
      try {
        const params = {
          id,
        };
        const res = await this.$api.removeGroupInfo(params);
        if (res.code === 200) {
          // this.getDigitalDictionaryInfo();
          // this.getDicTrees();
          this.search()
          this.tableData = [];
          this.$message.success("删除成功");
        }
      } catch (e) { }
    },
    handleNodeClick(data_1) {
      // console.log(data_1);
      if (data_1.parentId == 0) {
        this.checkObj = data_1;
      }
      let dataList = this.groupList;
      this.mapData(dataList, data_1.parentId, data_1);
    },
    mapData(data, parentId, data_1) {
      data.forEach((items) => {
        // console.log(items.id, parentId);
        if (items.id === parentId) {
          // console.log(data_1);
          this.tableData = [
            Object.assign(data_1, { dictionariesName: items.groupName }),
          ];
          this.checkObj = items;
          // console.log(item);
        }
        if (items.child) {
          this.mapData(items.child);
        }
      });
    },
    clear() {
      // this.getDicTrees();
      this.search()
      // this.tableData = [];
    },
    async isShowChange(val) {
      const params = {
        id: val.id,
        status: val.isShow,
      };
      const res = await this.$api.changeIsShow(params);
      if (res.code === 200) {
        this.$message.success("修改成功！");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-tree {
  background-color: transparent;
}

.singlePage {
  display: flex;
  flex-direction: column;

  // justify-content: s;
  .tree {
    flex: 0 0 auto;
    // flex: 1;

    // #1891FF
    &-top {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 12px;
      height: 48px;
      align-items: center;

      &-left {
        min-width: 100px;
      }

      &-right {
        color: #1891ff;

        &:hover {
          cursor: pointer;
        }
      }
    }

    &-bottom {
      background-color: #eeeeee;
      height: calc(100% - 48px);
      overflow-y: auto;
    }
  }

  .right {
    // flex: 8;
    flex: 1 1 auto;
  }

  .search-content {
    display: flex;
    justify-content: space-between;

    .btn-aggregate {
      //   margin-right: 10px;

      .icon-a-12 {
        font-size: 12px;
      }

      .icon-a-13 {
        font-size: 12px;
      }

      .inline-block {
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }

  .delColor {
    color: #ff0000;

    :hover {
      color: #eb3a3a;
    }
  }
}
</style>